'use client'
import * as React from 'react';
import {Card, Col, Progress, Row, Statistic, Table} from 'antd';
import styles from './page.module.scss';

export const HomePage = () => {
    return (
        <>
            <TopBanne/>
            <TopSection/>
            <TrafficStatistics/>
            <MonthlyTrends/>
            <Row gutter={[16, 16]}>
                <Col span={12}>
                    <TaskList/>
                </Col>
                <Col span={12}>
                    <ProductRanking/>
                </Col>
            </Row>
            <MemberManagement/>
            <OrdersAndTodos/>
        </>
    );
};

export default HomePage;
const TopBanne = () => {
    return (
        <Row gutter={16} className={styles.styles}>
            <Col className={styles.styles}>

                111
            </Col>
        </Row>
    )
}


const TopSection = () => (
    <Row className={styles.topSection} gutter={0}>
        <Col flex="auto">
            <Card title="今日 UV">
                <Statistic value={67}/>
            </Card>
        </Col>
        <Col flex="auto">
            <Card title="昨日 UV">
                <Statistic value={569}/>
            </Card>
        </Col>
        <Col flex="auto">
            <Card title="新用户">
                <Statistic value={45}/>
            </Card>
        </Col>
        <Col flex="auto">
            <Card title="近 7 日 UV">
                <Statistic value={366}/>
            </Card>
        </Col>
        <Col flex="auto">
            <Card title="近 30 日 UV">
                <Statistic value={5639}/>
            </Card>
        </Col>
    </Row>
);


const TrafficStatistics = () => (
    <Row className={styles.trafficStatistics}>
        <Col flex="auto">
            <Card title="总流量(人次)">
                <Statistic value={601986875}/>
            </Card>
        </Col>
        <Col flex="auto">
            <Card title="付费流量">
                <Statistic value={370221925}/>
                <Progress percent={61.5}/>
            </Card>
        </Col>
        <Col flex="auto">
            <Card title="免费流量">
                <Statistic value={180596062}/>
                <Progress percent={30}/>
            </Card>
        </Col>
        <Col flex="auto">
            <Card title="其他流量">
                <Statistic value={51168884}/>
                <Progress percent={8.5}/>
            </Card>
        </Col>
    </Row>
);


const MonthlyTrends = () => (
    <Row className={styles.monthlyTrends} gutter={[16, 16]}>
        <Col span={12}>
            <Card title="月数据趋势">
                {/* 这里可以嵌入一个图表组件，如 echarts */}
                <div style={{height: '200px'}}>月数据趋势图表</div>
            </Card>
        </Col>
        <Col span={12}>
            <Card title="支付成功率">
                <Statistic value={45.82} suffix="%"/>
            </Card>
        </Col>
    </Row>
);


const TaskList = () => (
    <Card title="任务代办提示">
        <Table
            columns={[
                {title: '任务名称', dataIndex: 'name'},
                {title: '状态', dataIndex: 'status'}
            ]}
            dataSource={[
                {name: '任务一', status: '进行中', key: '1'},
                {name: '任务二', status: '成功', key: '2'}
            ]}
        />
    </Card>
);

const ProductRanking = () => (
    <Card title="产品销售排行榜">
        {/* 这里可以嵌入一个排行榜组件 */}
        <ul>
            <li>产品一</li>
            <li>产品二</li>
            <li>产品三</li>
        </ul>
    </Card>
);

const MemberManagement = () => (
    <Card title="成员管理">
        {/* 这里可以嵌入一个表格组件 */}
        <Table
            columns={[
                {title: '成员名称', dataIndex: 'name'},
                {title: '邮箱地址', dataIndex: 'email'},
                {title: '状态', dataIndex: 'status'},
                {title: '操作', key: 'action', render: () => <span>操作1 | 更多</span>}
            ]}
            dataSource={[
                {name: '李华', email: 'lihua@example.com', status: '成功', key: '1'},
                {name: '张三', email: 'zhangsan@example.com', status: '进行中', key: '2'}
            ]}
        />
    </Card>
);

const OrdersAndTodos = () => (
    <Row className={styles.ordersAndTodos} gutter={[16, 16]}>
        <Col span={12}>
            <Card title="今日订单数">
                <Statistic value={736}/>
            </Card>
        </Col>
        <Col span={12}>
            <Card title="未完成待办">
                <Statistic value={12}/>
            </Card>
        </Col>
    </Row>
);